<template>
	<view class="more">
		<headSearch></headSearch>
		<view class="body">
			<view class="title">{{title}}</view>
			<view class="body-ul">
				<block v-for="(item,index) in movieListInfo" :key="item.id">
					<movieList :MonvieItem="item" :isList="true"></movieList>
				</block>
			</view>
		</view>
		<loadmore :visible="loadding" :index="3" type="red"></loadmore>
		<nomore :visible="pullUpOn"></nomore>
	</view>
</template>

<script>
	import headSearch from '../../components/headSearch/headSearch.vue';
	import movieList from '../../components/movieList/movieList.vue';
	export default {
		data() {
			return {
				title: "热播",
				movieListInfo: [],
				page: 1,
				limit: 10,
				loadding: false,
				pullUpOn: false,
			}
		},
		onLoad(option) {
			this.title = option.type;
			this.getMovieByType((res) => {
				if (res.code) {
					this.movieListInfo = res.data;
					this.page = this.page + 1;
				}
			})
		},
		methods: {
			getMovieByType(callback) {
				this.$api.getMovieByType({
					type: this.title,
					page: this.page,
					limit: this.limit
				}, (res) => {
					callback(res)
				})
			},
			onReachBottom() {
				if (this.pullUpOn) return;
				this.loadding = true;
				this.getMovieByType((res) => {
					if (res.code) {
						this.movieListInfo = this.movieListInfo.concat(res.data);
						this.page = this.page + 1;
						this.loadding = false
					} else {
						this.loadding = false;
						this.pullUpOn = true
					}
				})
			}
		},
		components: {
			headSearch,
			movieList
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		.body {
			.title {
				font-size: 48upx;
				font-weight: 500;
				margin: 34upx 0 12upx 0;
				padding-left: 36upx;
				box-sizing: border-box;
				text-align: center;
			}

			.body-ul {
				display: flex;
				flex-wrap: wrap;
				padding: 40upx 0;
				padding-left: 8upx;
			}
		}
	}
</style>
